<template>
	<view class="recharge_record_container">
		<view class="recharge_record_box">
			<view class="table_header_box">
				<view class="table_header_all" v-for="(item, index) in headerList" :key="index">
					{{ item }}
				</view>
			</view>

			<view class="record_list_box">
				<view class="record_list_all" v-for="(item, index) in recordList" :key="index">
					<view class="record_title">
						{{ index + 1 }}
					</view>
					<view class="record_title">
						{{ decodeURIComponent(item.package_name) }}
					</view>
					<view class="record_title">
						{{ item.yj }}
					</view>
					<view class="record_title">
						{{ item.created_at.split(' ')[0] }}
					</view>
					<view class="record_status" :class="[item.sett_status == 1 ? 'record_status_choose' : '']">
						{{ item.sett_status == 0 ? '未结算' : '已结算' }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			queryParams: {
				pageNow: 1,
				pageSize: 50
			},
			total: null,
			recordList: [],
			headerList: ['序号', '套餐名称', '佣金','充值日期', '结算状态']
		};
	},
	onLoad(options) {
		this.getIotPackageByGoods(options.id);
		if(this.queryParams.pageNow == this.total) {
			return
		}
	},
	onReachBottom() {
		if (this.queryParams.pageNow < this.total) {
			this.queryParams.pageNow++;
			this.getIotPackageByGoods();
		} else if (this.queryParams.pageNow == this.total) {
			return;
		}
	},
	methods: {
		// 获取设备套餐充值记录
		getIotPackageByGoods(val) {
			this.$request(
				'/api/getIotPackageByGoods',
				{
					id: val
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						this.recordList.push(item);
					});
					this.total = res.page_info.page_count;
				} else {
					uni.showToast({
						title: '查询充值记录失败',
						icon: 'none'
					});
					return;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		background: #f6f6f6;
	}
	
.recharge_record_container {
	padding-top: 30rpx;
	.recharge_record_box {
		.table_header_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 710rpx;
			height: 63rpx;
			background: #0e255b;
			border-radius: 10rpx 10rpx 0px 0px;
			padding: 0 20rpx;
			margin: 0 auto;

			.table_header_all {
				font-family: screen-font;
				font-weight: 500;
				font-size: 30rpx;
				color: #ffd79a;
			}
		}

		.record_list_box {
			padding: 44rpx 0 30rpx;
			.record_list_all {
				display: flex;
				justify-content: space-between;
				// width: 688rpx;
				height: 74rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				border-bottom: 1px solid #ccc;
				padding: 0 56rpx;
				.record_title {
					font-family: screen-font;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					padding-top: 20rpx;
				}

				.record_status {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 98rpx;
					height: 37rpx;
					background: linear-gradient(145deg, #3b64b6, #203a71);
					border-radius: 10rpx;
					font-family: button-font;
					font-weight: 400;
					font-size: 24rpx;
					color: #fcfcfc;
					margin-top: 20rpx;
				}

				.record_status_choose {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 98rpx;
					height: 37rpx;
					background: linear-gradient(145deg, #2c8154, #3d6e46);
					border-radius: 10rpx;
					font-family: button-font;
					font-weight: 400;
					font-size: 24rpx;
					color: #fcfcfc;
				}
			}
		}
	}
}
</style>
